<template>
  <el-row class="center-header">顶部导航栏</el-row>
  <div class="center-container">

    <el-card class="main-layout">
      <aside class="sidebar">
        <ul>
          <li @click="toggleMenu">菜单项</li>
          <ul v-if="menuOpen">
            <li>子菜单 1</li>
            <li>子菜单 2</li>
          </ul>
        </ul>
      </aside>
      <main>
        <router-view></router-view>
      </main>
    </el-card>
    <footer>底部信息栏</footer>
  </div>
</template>

<script setup>

import { ref } from 'vue';

const menuOpen = ref(false);
const toggleMenu = () => menuOpen.value = !menuOpen.value;
</script>

<style scoped>
.center-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0 100px; /* 增加左右边距 */
  background-color: #ffffff;
}
.center-header {
  position: sticky; /* 使用 sticky 来使元素粘附 */
  top: 0; /* 当滚动到顶部时固定 */
  background-color: #84f3ea;
  padding: 5px;
  text-align: center;
  z-index: 1000;
}
footer {
  background-color: #a5fffa;
  padding: 10px;
  text-align: center;
}
.main-layout {
  display: flex;
  flex: 1;
  gap: 20px; /* 增加左右元素间距 */

}
.sidebar {
  width: 200px;
  background-color: #3a393a;
  padding: 10px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  cursor: pointer;
  padding: 5px;
  transition: 0.3s;
}
.sidebar li:hover {
  background: #bbb;
}
main {
  flex: 1;
  padding: 10px;
  background: #f9f9f9;
}
</style>